<template>
  <div>
    <div class="managehmpg" :style="{height:height}">
      <div class="left">
        <div class="ltop">
          <div class="three_tittle">订单分析</div>
          <div id="myChart"></div>
        </div>
        <div class="lbottom">
          <div class="three_tittle">收支分析</div>
          <div id="myCharts"></div>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <div class="chuqin">
            <img src="../../assets/images/ZongCaiGuanLi_ShouYe/u12685.png" alt />
          </div>
          <div class="wenzi wenzi11">出勤</div>
          <div class="xian1"></div>
          <div class="progress1">
            <el-progress type="circle" :width="80" :percentage="90"></el-progress>
            <div class="wenzi chuql">昨日出勤率</div>
            <div class="renshu">
              <span class="sp1">总人数：120人</span>
              <span class="sp2">出勤数：110人</span>
            </div>
          </div>
        </div>
        <div class="center">
          <div class="chuqin dindan">
            <img src="../../assets/images/ZongCaiGuanLi_ShouYe/u12669.png" alt />
          </div>
          <div class="wenzi wenzi1 wenzi2">采购订单</div>
          <div class="xian1"></div>
          <div class="dingdans">
            <div class="shu">5</div>
            <div class="shu2">订单数</div>
          </div>
          <div class="dingdans2">
            <div class="shu">32000.00</div>
            <div class="shu2">订单额(元)</div>
          </div>
        </div>
        <div class="bottom">
          <div class="chuqin dindan dindans">
            <img src="../../assets/images/ZongCaiGuanLi_ShouYe/u12641.png" alt />
          </div>
          <div class="wenzi wenzi1 wenzi2">生产订单</div>
          <div class="xian1"></div>
          <div class="dingdans">
            <div class="shu">2</div>
            <div class="shu2">订单数</div>
          </div>
          <div class="dingdans2">
            <div class="shu">12000.00</div>
            <div class="shu2">订单额(元)</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      height: ""
    };
  },
  mounted() {
    setTimeout(() => {
      this.drawLine();
      this.drawLines();
    }, 500);
  },
  created() {
    this.height = document.documentElement.scrollHeight - 220 + "px";
    // this.drawLine();
  },
  methods: {
    // 订单分析
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById("myChart")
      );
      // 绘制图表
      var xData = (function() {
        var data = [];
        for (var i = 1; i < 13; i++) {
          data.push(i + "月份");
        }
        return data;
      })();

      myChart.setOption({
        backgroundColor: "#fff",
        title: {
          text: "",
          subtext: "订单分析",
          x: "1%",

          textStyle: {
            color: "#fff",
            fontSize: "22"
          },
          subtextStyle: {
            color: "#909399",
            fontSize: "14",
            fontWeight: "bold"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff"
            }
          }
        },
        grid: {
          borderWidth: 0,
          top: 80,
          bottom: 30,
          textStyle: {
            color: "#fff"
          }
        },
        legend: {
          x: "60%",
          top: "8%",
          textStyle: {
            color: "#90979c"
          },
          data: ["销售计划", "实际销售计划"]
        },

        calculable: true,
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#90979c"
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            data: xData
          }
        ],
        yAxis: [
          {
            type: "value",

            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#90979c"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: false
            }
          }
        ],

        series: [
          {
            name: "销售计划",
            type: "bar",
            stack: "总量",
            barMaxWidth: 35,
            barGap: "10%",
            itemStyle: {
              normal: {
                color: "#409EFF"
              }
            },
            data: [
              709,
              1917,
              2455,
              2610,
              1719,
              1433,
              1544,
              3285,
              5208,
              3372,
              2484,
              4078
            ]
          },

          {
            name: "实际销售计划",
            type: "bar",
            stack: "总量",
            itemStyle: {
              normal: {
                color: "#ebb563",
                barBorderRadius: 0
              }
            },
            data: [
              327,
              1776,
              507,
              1200,
              800,
              482,
              204,
              1390,
              1001,
              951,
              381,
              220
            ]
          }
        ]
      });
    },
    // 收支分析
    drawLines() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById("myCharts")
      );
      // 绘制图表
      var xData = (function() {
        var data = [];
        for (var i = 1; i < 13; i++) {
          data.push(i + "月份");
        }
        return data;
      })();

      myChart.setOption({
        backgroundColor: "#fff",
        title: {
          text: "",
          subtext: "收支分析",
          x: "1%",

          textStyle: {
            color: "#fff",
            fontSize: "22"
          },
          subtextStyle: {
            color: "#909399",
            fontSize: "14",
            fontWeight: "bold"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff"
            }
          }
        },
        grid: {
          borderWidth: 0,
          top: 80,
          bottom: 30,
          textStyle: {
            color: "#fff"
          }
        },
        legend: {
          x: "60%",
          top: "8%",
          textStyle: {
            color: "#90979c"
          },
          data: ["收支计划", "实际收支计划"]
        },

        calculable: true,
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#90979c"
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            data: xData
          }
        ],
        yAxis: [
          {
            type: "value",

            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#90979c"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: false
            }
          }
        ],

        series: [
          {
            name: "收支详情",
            type: "bar",
            stack: "总量",
            barMaxWidth: 35,
            barGap: "10%",
            itemStyle: {
              normal: {
                color: "#409EFF"
              }
            },
            data: [
              709,
              1917,
              2455,
              2610,
              1719,
              1433,
              1544,
              3285,
              5208,
              3372,
              2484,
              4078
            ]
          },

          {
            name: "实际收支详情",
            type: "bar",
            stack: "总量",
            itemStyle: {
              normal: {
                color: "#ebb563",
                barBorderRadius: 0
              }
            },
            data: [
              327,
              1776,
              507,
              1200,
              800,
              482,
              204,
              1390,
              1001,
              951,
              381,
              220
            ]
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.managehmpg {
  overflow: hidden;
  padding-left: 20px;
  padding-right: 20px;
  color: $deepgrey;
}
.left {
  display: inline-block;
  width: 61%;
  height: 100%;
}
.ltop {
  height: 49%;
  background-color: $white;
  border-radius: 10px;
  margin-bottom: 14px;
  padding-left: 20px;
  padding-right: 20px;
}
.lbottom {
  height: 49%;
  background-color: $white;
  border-radius: 10px;
  padding-left: 20px;
  padding-right: 20px;
}
.right {
  float: right;
  width: 38%;
  height: 100%;
}
.top {
  height: 40%;
  background-color: $white;
  border-radius: 10px;
  margin-bottom: 14px;
  position: relative;
}
.center {
  height: 28%;
  background-color: $white;
  border-radius: 10px;
  margin-bottom: 14px;
  position: relative;
}
.bottom {
  height: 28%;
  background-color: $white;
  border-radius: 10px;
  margin-bottom: 10px;
  position: relative;
}
.three_tittle {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid $linecolor;
}
.chuqin {
  width: 77px;
  height: 77px;
  position: absolute;
  top: 18%;
  left: 7%;
}
.chuqin img {
  width: 77px;
  height: 77px;
}
.dindan {
  width: 77px;
  height: 77px;
  position: absolute;
  top: 18%;
  left: 7%;
}
.dindan img {
  width: 77px;
  height: 77px;
}
.dindans {
  width: 67px;
  height: 67px;
  position: absolute;
  top: 18%;
  left: 7%;
}
.dindans img {
  width: 67px;
  height: 67px;
}
.wenzi {
  color: #5167d2;
  font-size: 16px;
}
.wenzi1 {
  position: absolute;
  top: 66%;
  left: 12%;
}
.wenzi11 {
  position: absolute;
  top: 60%;
  left: 12%;
}
.wenzi2 {
  position: absolute;
  top: 66%;
  left: 8%;
}
.chuql{
  margin-bottom: 30px;
}
.xian1 {
  width: 1px;
  height: 70%;
  border-left: 2px solid $linecolor;
  position: absolute;
  top: 15%;
  left: 30%;
}
.progress1 {
  position: absolute;
  top: 20%;
  left: 40%;
  text-align: center;
}
.renshu {
  font-size: 12px;
}
.dingdans {
  width: 70px;
  height: 70px;
  padding-right: 20px;
  text-align: center;
  border-right: 1px solid $linecolor;
  position: absolute;
  top: 30%;
  left: 40%;
}
.dingdans2 {
  width: 100px;
  height: 70px;
  text-align: center;
  position: absolute;
  top: 30%;
  left: 65%;
}
.shu {
  font-size: 28px;
  color: #5167d2;
}
#myChart{
  width: 100%;
  height: 80%;
}
#myCharts{
  width: 100%;
  height: 80%;
}
</style>